<template>
  <!--  <ul class="basicInformation">
      <li v-for="(item, index) in basicInformation" :key="index"><span>{{item.items[0].label}}：</span> <span>{{item.items[0].value ? item.items[0].value : '-&#45;&#45;' }}</span></li>
    </ul>-->
  <div v-if="basicInformation.length !== 0" style="padding: 10px 0 10px 20px;background-color: #FFFFFF;">
    <div class="messageContent" v-for="(item, index) in basicInformation" :key="index">
      <div v-for="(item1, index1) in item.items" :class="item1.length==1?'message_de':'message_deOne'"
           :key="item1.id">
        <detailMessage :attrList="item1"></detailMessage>
      </div>
    </div>
  </div>
  <a-empty v-else description="暂无数据" class="nodata"/>
</template>
<script>
import copyACtion from '@/views/singleProject/fileSingle/el-common-js/copy'
import detailMessage from "@/components/singlePage/detailMessage";
export default {
  mixins: [copyACtion],
  data() {
    return {
      // basicInformation: []
    }
  },
  props: {
    basicInformation: {
      type: Array,
      default: () => []
    }
  },
  components: {
    detailMessage
  },
  mounted() {
    // this.initBasicInfo()
  },
  methods: {
    /**
     * 刷新基本信息
     */
    initBasicInfo() {
      let fileSingleData = JSON.parse(sessionStorage.getItem('fileSingle'))
      this.getBasicInfo({
        tableArr: fileSingleData.tableArr, callback: (res) => {
          if (res.code === 200) {
            this.basicInformation = res.data
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.basicInformation {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 25px 20px 25px;
  box-sizing: border-box;
  background-color: #fff;
  & > li {
    width: 33.3%;
    margin-bottom: 16px;
  }
  .titleLi {
    font-size: 14px;
    color: #333333;
    font-weight: 400;
    & > span:nth-child(1) {
      color: #666666;
      width: 100px;
      display: inline-block;
    }
  }
  .activiTitleLi {
    cursor: pointer;
    color: #386BD7 !important;
  }
}
.messageContent {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  .message_de {
    width: 30%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .messageList {
      min-width: 25%;
      margin: 5px 0;
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
    }
  }
  .message_deOne {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .messageList {
      min-width: 25%;
      margin: 5px 0;
      font-size: 14px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>